<!-- 通用登录页 -->
<template>
  <div class="body">
    <img src="@/assets/login/bg-login.png" style="
        width: 100%;
        height: 100%;
        position: fixed;
        -webkit-user-drag: none;
        z-index: -9999;
      " />

    <div class="loginDiv">

      <div class="login-type" style="display: none;">
        <div class="loading-type-util login-type-common" :class="{ active: loginWay === 'common' }"
          @click="trunLoginWay('common')">普通登录
        </div>
        <div class="loading-type-util login-type-unite" :class="{ active: loginWay === 'unite' }"
          @click="trunLoginWay('unite')">统一登录认证
        </div>
      </div>

      <div class="welcomeVisit">欢迎访问</div>
      <div class="logoText">{{ sysName }}</div>

      <div class="login-wrapper">
        <!-- 用户名 -->
        <div class="input-item input-item-input">
          <label for="username">
            <img src="@/assets/login/login-user.png" class="imgIcon" />
          </label>
          <input type="text" class="username input" autocomplete="off" placeholder="请输入用户名" required
            v-model="loginForm.username" @keyup.enter="submit" />
        </div>
        <!-- 密码 -->
        <div class="input-item input-item-input">
          <label for="password">
            <img src="@/assets/login/login-password.png" class="imgIcon"
              style="height: 22px; transform: translateX(-2px);" />
          </label>
          <input type="password" class="password input" autocomplete="off" placeholder="请输入密码" required
            v-model="loginForm.pwd" @keyup.enter="submit" />
        </div>
        <!-- 验证码 -->
        <div class="input-item input-item-input input-item-vcode">
          <label for="vcode">
            <img src="@/assets/login/login-role.png" class="imgIcon" />
          </label>
          <input type="text" class="vcode input" autocomplete="off" placeholder="请输入验证码" required
            v-model="loginForm.captcha" @keyup.enter="submit" />
          <!-- 验证码图片 -->
          <img id="imgVerifyCode" alt="验证码" width="85" height="50" title="点击更换" @click="getVerifycode"
            :src="verifyCodeSrc" />
        </div>
        <!-- 动态码: 只有统一认证 -->
        <div class="input-item input-item-input input-item-vcode" v-if="loginWay === 'unite'">
          <label for="vcode">
            <img src="@/assets/login/login-app.png" class="imgIcon" />
          </label>
          <input type="text" class="vcode input" autocomplete="off" placeholder="请输入动态码" required
            v-model="loginForm.optcode" @keyup.enter="submit" />
        </div>
        <!-- 登录按钮 -->
        <div class="input-item input-item-button">
          <button class="btn-submit" @click="submit" v-if="loginWay === 'common'">登录</button>
          <button class="btn-attestation" v-if="loginWay === 'unite'" @click="submit">
            <img src="@/assets/login/login-app.png" style="height: 22px; margin-right: 5px" />
            <span>统一登录认证</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import store from "@/store";
import { SYS_NAME, HOMEPAGE } from "@/config";
import { getBasinList, getCaptcha, login, uniteLogin } from "@/api/login";
import { getUserAuthorityList } from "@/api/login";
// notification
import { message } from "ant-design-vue";
import router from "@/router";
import CryptoJS from "crypto-js";
// 登录表单
const loginForm = reactive({
  username: "",
  password: "",
  pwd: "",
  captcha: null, // 验证码
  optcode: null, // 动态码
  basinId: null,
});
// 登录方式(普通登录or统一登录认证)
const loginWay = ref('common')
// 切换登录的方式
const trunLoginWay = (way) => {
  loginWay.value = way
  loginForm.captcha = null
  loginForm.optcode = null
  getVerifycode() // 重新获取验证码
}
// 显示/隐藏系统名称
const sysName = ref(SYS_NAME);
// 验证码图片地址
const verifyCodeSrc = ref(require("@/assets/images/loading.gif"));
// 当前探区
const currBasin = ref("");
// 探区列表
const basinList = ref([]);

// 做密码校验(未加密)
const rulePassWord = ref('')
// 登录 | 统一登录认证
const submit = async () => {
  if (!loginForm.username || !loginForm.pwd) {
    message.error("用户名和密码不能为空！");
    return;
  }
  rulePassWord.value = loginForm.pwd

  loginForm.password = loginWay.value === 'common' ? CryptoJS.SHA1(loginForm.pwd).toString() : btoa(loginForm.pwd)
  let _postParams = JSON.parse(JSON.stringify(loginForm));
  delete _postParams.pwd;
  let res
  if (loginWay.value === 'common') {
    res = await login(_postParams)
  } else if (loginWay.value === 'unite') {
    res = await uniteLogin(_postParams)
  }

  if (res.code === 0) {
    // 获取当前用户权限
    getUserAuthorityList({ userid: "" }).then((authres) => {
      console.log('hahah', res)
      res.userRoles = authres.userRoles || [];
      res.basinId = currBasin.value.prospectId;
      store.commit("loginUserInfo/loginSucess", res);
      window.versions.getUserName(res.userName)
      //登录成功
      router.replace(HOMEPAGE);
    });
  } else {
    message.error(res.msg);
    getVerifycode();
  }
};

// 获取验证码
const getVerifycode = async () => {
  const res = await getCaptcha()
  // console.log('res', res)
  // // 创建Blob对象
  // const blob = new Blob([res], { type: 'image/png' });
  // 生成URL
  const url = URL.createObjectURL(res);
  verifyCodeSrc.value = url;
  // verifyCodeSrc.value = res
};
// 获取探区列表
const fatchBasinList = async () => {
  const res = await getBasinList();
  if (res.basinList.length > 0) {
    basinList.value = res.basinList;
    currBasin.value = res.basinList[0];
    loginForm.basinId = currBasin.value.prospectId;
  } else {
    message.error("暂无探区数据，请联系管理员");
  }
};

onMounted(() => {
  // 初始化验证码
  getVerifycode();
  // 获取探区列表
  fatchBasinList();
  //清除登录信息
  store.commit("loginUserInfo/loginSucess", null);
})
</script>


<style lang="scss" scoped>
.body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  // background-image: url("~@/assets/images/login/bg-login.png");
  font-family: 微软雅黑;

  .logo {
    position: fixed;
    top: 29px;
    left: 67px;
    z-index: 10;
  }
}

.loginDiv {
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  width: 335px;
  background-color: rgba($color: #000000, $alpha: 0.4);
  border-radius: 15px;
  border: 3px solid #4cb3f2;
  padding: 50px 0 50px 30px;
}

.welcomeVisit {
  color: #57c6ff;
}

.imgIcon {
  height: 18px;
  margin-left: 16px;
  margin-top: -2px;
}

.logoText {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin: 5px 0 30px 0;
  letter-spacing: 1px;
}


.login-wrapper {
  margin-right: 30px;

  .input-item-input {
    margin: 10px 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    background: #fff;
    text-align: left;
    display: flex;
    align-items: center;

    label {
      display: inline-block;
      width: 40px;
      height: 100%;
      line-height: 40px;
    }

    .input {
      display: inline-block;
      width: 80%;
      height: 70%;
      border: none;
      border-radius: 10px;
      color: #333;
      outline: none;
      font-size: 13px;
    }

    .vcode {
      width: 60%;
    }
  }

  #imgVerifyCode {
    width: 60px;
    height: 35px;
  }

  .input-item-button {
    width: 100%;
    margin-top: 30px;

    .btn-submit {
      width: 100%;
      height: 40px;
      border-radius: 10px;
      background: #07b99a;
      color: #fff;
      border: none;
      outline: none;
      cursor: pointer;
      transition: all 0.5s;
    }

    .btn-attestation {
      @extend .btn-submit;
      background: #0992f2;
    }

    .btn-submit:hover,
    .btn-submit:active {
      background: #2ca597;
    }

    .btn-attestation:hover,
    .btn-attestation:active {
      background: #0b6fc7;
    }
  }
}

.login-type {
  display: flex;
  justify-content: center;
  margin-right: 30px;
  margin-bottom: 15px;
  font-size: 16px;
  user-select: none;
  color: #fff;
  letter-spacing: 0.5px;
}

.loading-type-util {
  padding: 7px 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 150ms;
  border-radius: 5px;
  font-size: 14px;
}

.login-type-common {
  background-color: #07b99a;
  margin-right: 10px;
  width: 90px;
}

.login-type-unite {
  // background-color: #1e9de5;
  background-color: #0992f2;
  width: 110px;
}

.login-type .loading-type-util:hover,
.login-type .loading-type-util.active {
  opacity: 1;
}
</style>

